<template>
  <h1>表单输入绑定</h1>
  <form>
    <input type="text" v-model="message">
    <p>{{ message }}</p>

    <!--    复选框-->
    <!--    当 input 被选中时，Vue 会自动把 checked 的值从 false 更新为 true，这是 双向绑定 的特性-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>修饰符：lazy 修饰符，当失去焦点时才更新</p>
    <input type="text" v-model.lazy="message2">
    <p>{{ message2 }}</p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      checked: false,
      message2: ""
    }
  }
}
</script>
